﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hui</title>
    <link href="../../../css/Hui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .H-picker { left: 0; right: 0; bottom: 0; height: 250px; }
        .H-picker-button { height: 40px; }
        .H-picker-scroll { height: 210px; background: #f4f4f4; left: 0; right: 0; bottom: 0; }
        .H-picker-select-area { height: 40px; border: 1px solid #d7d7d7; border-width: 1px 0; left: 0; right: 0; top: 50%; margin-top: -20px; }
        .H-picker-option { height: 40px; line-height: 40px; }
    </style>
</head>
<body>
    <div class="H-picker H-position-fixed H-width-100-percent H-height-100-percent H-z-index-1000 H-position-relative H-overflow-hidden">
        <div class="H-picker-button H-theme-background-color-white H-flexbox-horizontal">
            <div class="H-flex-item H-horizontal-left H-vertical-middle"><button class="H-button H-font-size-14 H-outline-none H-padding-vertical-both-3 H-padding-horizontal-both-8 H-theme-background-color5 H-theme-font-color-white H-theme-border-color5 H-theme-border-color5-click H-theme-background-color5-click H-theme-font-color1-click H-border-radius-3 H-margin-horizontal-left-10" style="min-width:0;">取消</button></div>
            <div class="H-flex-item H-horizontal-right H-vertical-middle"><button tapmode="" onclick="var ele = getElement(); H.alert(ele.innerText);" class="H-button H-font-size-14 H-outline-none H-padding-vertical-both-3 H-padding-horizontal-both-8 H-theme-background-color1 H-theme-font-color-white H-theme-border-color1 H-theme-border-color1-click H-theme-background-color1-click H-theme-font-color1-click H-border-radius-3 H-margin-horizontal-right-10" style="min-width:0;">确定</button></div>
        </div>
        <div class="H-picker-scroll H-position-absolute H-width-100-percent  H-z-index-10000 H-overflow-hidden">
            <div class="H-picker-item H-text-align-center H-position-relative H-z-index-100000">
                <div class="H-picker-option  H-font-size-18" style="font-size:2rem;color:#f00;">病假</div>
                <div class="H-picker-option  H-font-size-18">调休假</div>
                <div class="H-picker-option  H-font-size-18">婚假</div>
                <div class="H-picker-option  H-font-size-18">厂假</div>
                <div class="H-picker-option  H-font-size-18">陪产假</div>
            </div>
            <div class="H-picker-select-area H-position-absolute H-width-100-percent H-z-index-10000 H-box-sizing-border-box"></div>
        </div>
    </div>

    <script src="../../../script/H.js" type="text/javascript"></script>
    <script type="text/javascript">
        var startX = 0;
        var startY = 0;
        var currentTranslateY = 0;
        var currentIndex = 0;
        var itemSize = H.Ds(".H-picker-item .H-picker-option").length;
        var areaTop = H.D(".H-picker-select-area").offsetTop;
        var clientHeight = H.D(".H-picker-select-area").clientHeight + 2;
        H.cssText(".H-picker-item", "-webkit-transform:translateY(" + areaTop + "px);");

        // 获取当前索引
        function getIndex() {
            return currentIndex;
        }

        // 获取当前对象
        function getElement() {
            return H.D(".H-picker-item .H-picker-option:nth-child(" + (currentIndex + 1) + ")");
        }

        // 滑动开始
        H.D(".H-picker-scroll").addEventListener("touchstart", function (event) {
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];
                startX = touch.pageX;
                startY = touch.pageY;
                currentTranslateY = Number(H.D(".H-picker-item").style.WebkitTransform.replace(/translateY\(/g, "").replace(/px\)/g, ""));
            }
        }, false);

        // 滑动过程
        H.D(".H-picker-scroll").addEventListener("touchmove", function (event) {
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];
                event.preventDefault();
                var range = touch.pageY - startY + currentTranslateY;
                H.cssText(".H-picker-item", "-webkit-transform:translateY(" + range + "px);");

                currentIndex = Math.abs(Math.round((range - areaTop) / clientHeight));

                if (range > areaTop) {
                    currentIndex = 0;
                }
                if (range < -areaTop) {
                    currentIndex = itemSize - 1;
                }
                if (range <= areaTop) {
                    var currentObj = H.D(".H-picker-item .H-picker-option:nth-child(" + (currentIndex + 1) + ")");
                    H.cssText(currentObj, "font-size:2rem;color:#f00;-webkit-transition: font-size 0.2s;");
                    var siblings = H.siblings(currentObj);
                    if (siblings && siblings.length > 0) {
                        for (var i = 0; i < siblings.length; i++) {
                            H.cssText(siblings[i], "font-size:1.8rem;color:#000;");
                        }
                    }
                }

            }
        }, false);

        // 滑动结束
        H.D(".H-picker-scroll").addEventListener("touchend", function (event) {
            var _range = -(clientHeight) * (currentIndex - 1) + (areaTop - clientHeight);
            if (_range > areaTop) {
                _range = areaTop;
            }
            if (_range < (-(clientHeight) * (itemSize - 1 - 1) + (areaTop - clientHeight))) {
                _range = -(clientHeight) * (itemSize - 1 - 1) + (areaTop - clientHeight);
            }
            H.cssText(".H-picker-item", "-webkit-transition: transform 0.2s;-webkit-transform:translateY(" + _range + "px);");
        }, false);
    </script>
</body>
</html>